<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">规章制度标题</label>
        <el-input
          v-model="query.name"
          clearable
          placeholder="规章制度标题"
          style="width: 185px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <!-- <label class="el-form-item-label">类型</label>
        <el-input
          v-model="query.type"
          clearable
          placeholder="类型"
          style="width: 185px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        /> -->
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog
        @open="openEditor"
        :close-on-click-modal="false"
        :before-close="crud.cancelCU"
        :visible.sync="crud.status.cu > 0"
        :title="crud.status.title"
        width="80%"
      >
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="80px"
        >
          <el-form-item label="规章制度标题" prop="name">
            <el-input v-model="form.name" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="规章制度封面" prop="imageUrl">
            <el-upload
              ref="upload"
              :action="baseUrl +'/api/localStorage/pictures'"
              :headers="authHeader"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-success="handleImgUploadSuccess"
              :on-remove="handleRemove"
              :show-file-list="false"
            >
              <img
                v-if="form.imageUrl"
                :src="imageUrl"
                width="100%"
                height="100%"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
            <!-- <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog> -->
          </el-form-item>
          <el-form-item label="规章制度内容" prop="content" class="content">
            <Editor
              ref="editor"
              style="width: 160%;"
              v-model="form.content"
              @onChange="onChange"
            />
          </el-form-item>
          <!-- <el-form-item label="图片地址" prop="imageUrl">
            <el-input v-model="form.imageUrl" style="width: 370px;" />
          </el-form-item> -->
          <!-- <el-form-item label="类型" prop="type">
            未设置字典，请手动设置 Select
          </el-form-item> -->
          <el-form-item label="排序" prop="order">
            <el-input v-model="form.order" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button
            :loading="crud.status.cu === 2"
            type="primary"
            @click="crud.submitCU"
            >确认</el-button
          >
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%;"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="规章制度标题" />
        <el-table-column prop="content" label="规章制度内容" :show-overflow-tooltip="true">
         <template slot-scope="scope">
            <div v-html="scope.row.content" class="contentDiv"></div>
          </template>
        </el-table-column>
        <el-table-column prop="imageUrl" label="图片地址" />
        <!-- <el-table-column prop="type" label="类型" /> -->
        <el-table-column
          v-if="checkPer(['admin', 'announcement:edit', 'announcement:del'])"
          label="操作"
          width="150px"
          align="center"
        >
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission" />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudAnnouncement from '@/api/announcement'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import { upload } from '@/utils/upload'
import { mapGetters } from 'vuex'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import Editor from '../../components/Editor.vue'
import { getToken } from '@/utils/auth'

const defaultForm = {
  id: null,
  name: null,
  content: null,
  imageUrl: null,
  type: 4,
  order: null,
  createdAt: null,
  updatedAt: null,
  isDeleted: null
}
export default {
  name: 'AnnouncementStandard',
  components: { pagination, crudOperation, rrOperation, udOperation, Editor },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: '规章制度',
      url: 'api/announcement',
      idField: 'id',
      sort: 'id,desc',
      crudMethod: { ...crudAnnouncement },
      form: {
        content: '',
        imageUrl: ''
      },
      query: {
        type: 4
      },
      optShow:{
        add:true,
        edit:true,
        del:true,
        download:false,
        reset:true,
      }
    })
  },
  data() {
    return {
      imageUrl: '',
      url: '',
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [],
      baseUrl: process.env.VUE_APP_BASE_API,
      permission: {
        add: ['admin', 'announcement:add'],
        edit: ['admin', 'announcement:edit'],
        del: ['admin', 'announcement:del']
      },
      rules: {
        name: [
          { required: true, message: '规章制度标题不能为空', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '规章制度内容不能为空', trigger: 'blur' }
        ],
        // imageUrl: [
        //   { required: true, message: '规章制度封面不能为空', trigger: 'blur' }
        // ],
        type: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
        order: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
      },
      queryTypeOptions: [
        { key: 'name', display_name: '规章制度标题' },
        { key: 'type', display_name: '类型' }
      ]
    }
  },
 computed: {
    ...mapGetters(['baseApi']),
    authHeader() {
      return { Authorization: getToken() }
    }
  },
  methods: {
    openEditor() {
      this.$nextTick(() => {
        this.$refs.editor.setText(this.form.content);
        if (this.form.imageUrl == null) {
          // 新增
          this.imageUrl = null;
        } else {
          this.imageUrl = this.baseUrl+this.form.imageUrl.slice(4);
        }
      });
    },
    onChange(value) {
      this.form.content = value
      // this.form.content = this.$refs.editor.getText();
    },

    [CRUD.HOOK.beforeRefresh]() {
      return true;
    },
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据

    // onchange(content) {
    //   this.form.content = content
    // },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleImgUploadSuccess(response, file) {
      {
        this.form.imageUrl = response.path;
        this.imageUrl = URL.createObjectURL(file.raw);
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/content.scss';
</style>
